<template>
	<div>
		<headers @back-click="back()" v-bind:headers="headers"></headers>
		<div class="content">
			<tab>
				<tab-item selected @on-item-click="">全部</tab-item>
				<tab-item @on-item-click="">预约租赁</tab-item>
				<tab-item @on-item-click="">租赁中</tab-item>
				<tab-item @on-item-click="">到期退还</tab-item>
				<tab-item @on-item-click="">已完成</tab-item>
			</tab>
			<div  v-if="0" class="nolist">
                <div class="img"></div>
                <div style="font-size: 12px;color: #999999;line-height: 18px;margin-top: 14px">
                    <div>亲，您还没有相关订单哟～</div>
                    <div>快去下单试试～</div>
                </div>
            </div>
            <div v-if="1">
            	<div class="box unit" v-for="i in lst">
            		<div class="top">
                        <i class="status" >{{i.stateStr}}</i>
                        <span class="time">时间：{{i.createTime}}</span>
                    </div>
                    <div class="infoWrap list">
                        <div class="item">
                            <div class="goods">
                                <div class="product-img">
                                    <img>
                                </div>
                                <div class="product-info">
                                    <p class="name" >{{i.goodsName}}</p>
                                    <p class="standard">
                                        <!-- <i ng-if="!dectServ.isNull(i.versions)">{{i.versions}}</i><i ng-if="!dectServ.isNull(i.color)">{{i.color}}</i><i ng-if="    !dectServ.isNull(i.storage)">{{i.storage}}</i> -->
                                        <i v-for = "k in i.standardList">{{k.name}}</i>
                                    </p>
                                    <p class="orderId">
                                        订单编号:{{i.orderNumber}}
                                    </p>
                                </div>
                            </div>
                            <!-- 待确认 -->
                            <div class="detail" v-if="i.state=='pending_system_credit_check'||i.state=='pending_jimi_credit_check'||i.state=='pending_artificial_credit_check'">
                                <i class="grey" >
                                    <span class="note">{{i.description}}</span>
                                </i>
                                <div class="btn-cyc" ng-click="goCancel($event,i)">
                                    <span>取消订单</span>        
                                </div>                            
                            </div>
                            <!-- 待签约 -->
                            <div class="detail" v-if="i.state=='confirmed'">
                                <i class="grey" >
                                    <span>您的租赁订单已审核通过，请耐心等待2-3个工作日，业务员派送前会和您联系，请保持电话畅通哦</span>
                                    </i>    
                            </div>
                            <!-- 待支付 -->
                            <div class="detail" v-if="i.state=='pending_pay'">
                                <i class="grey" >
                                    <span class="note">{{i.description}}</span>
                                </i>
                                <div class="btn-cyc pay" ng-click="goSign($event,i)" style="margin-left: 0.32rem">
                                    <span>支付 <count-down my-time="i.lastPayTime"></count-down></span>     
                                </div>
                                <div class="btn-cyc" ng-click="goCancel($event,i)" style="margin-left: 0.32rem">
                                    <span>取消订单</span>        
                                </div> 
                            </div>
                            <!-- 催促发货 -->
                            <div class="detail" v-if="i.state=='pending_send_goods'">
                                <i class="grey" >
                                    <span class="note">{{i.description}}</span>
                                </i>
                                <div class="btn-cyc" ng-click="goPress($event,i)">
                                    <span>催促发货</span>
                                </div> 
                            </div>
                            <!-- 租赁中 -->
                            <div class="detail" v-if="i.state=='running'||i.state=='running_overdue'">
                                <i class="grey" >
                                    <span class="note">{{i.description}}</span>
                                </i>
                                <!-- <div class="btn-cyc" ng-click="goPay($event,i)"> -->
                                <div class="btn-cyc" ng-click="goSign($event,i)" ng-if="!i.paid">
                                    <span>支付租金</span>
                                </div> 
                            </div>
                            <!--到期待还 -->
                            <div class="detail" v-if="i.state=='pending_return'">
                                <i class="grey" >
                                    <span class="note">{{i.description}}</span>
                                </i>
                                <div class="btn-cyc" ng-click="goRefund($event,i)">
                                    <span>立即还机</span>
                                </div> 
                            </div>
                            <!--退还逾期 -->
                            <div class="detail" v-if="i.state=='return_overdue'">
                                <i class="grey" >
                                    <span class="note">{{i.description}}</span>
                                </i>
                                <!-- <div class="btn-cyc" ng-click="goPay($event,i)"> -->
                                <div class="btn-cyc" ng-click="messageDetils(i)">
                                    <span>支付违约金</span>
                                </div> 
                            </div>
                            <!-- 还机中 -->
                            <div class="detail" v-if="i.state=='refunding'">
                                <i class="grey" >
                                    <span class="note">{{i.description}}</span>
                                </i>
                            </div> 
                            <!-- 已取消 -->
                            <div class="detail" v-if="i.state.indexOf('canceled')>0">
                                <i class="grey" >
                                     <span class="note">{{i.description}}</span>
                                </i>
                            </div>    
 
                            <!-- 待发货/发货中 -->
                            <div class="detail" v-if="i.state=='pending_receive_goods'||i.state=='returning'">
                                <i class="grey">
                                    <span class="note">{{i.description}}</span>
                                </i>
                                <div class="btn-cyc" ng-click="goExpress($event,i)" >
                                    <span>查看物流</span>     
                                </div>  
                            </div>
                            <!-- 租机中报修 -->
                            <div class="detail" v-if="i.state=='signing'&&i.signed=='true'&&i.isLease=='true'&&i.advanced!='true'&&i.refund!='true'&&i.expired!='true'&&i.near!='true'&&i.advanced!='true'">
                                <i class="grey">
                                    <span class="note">{{i.description}}</span>
                                </i>
                                <div class="btn-cyc" ng-click="goRepair($event,i.id)" ng-if="i.isLease=='true'">
                                    <span>报修</span>     
                                </div>
                            </div>
                            <!-- 租机中一次性付清 -->
                            <div class="detail" v-if="i.state=='signing'&&i.signed=='true'&&i.refund!='true'&&i.advanced=='true'">
                                    <i class="grey">
                                        <span class="note">{{i.description}}</span>
                                    </i>
                                    <div class="btn-cyc" ng-click="goRefund($event,i)" ng-if="i.isLease=='true'">
                                        <span>预约还机</span>
                                    </div> 
                                    <div class="btn-cyc" ng-click="goExpress($event,i)" ng-if="i.isLease!='true'">
                                        <span>查看物流</span>        
                                    </div> 
                            </div>
                            <!-- 租机中支付 -->
                            <div class="detail" v-if="(i.state=='signing'&&i.signed=='true'&&i.refund!='true'&&i.expired=='true')||(i.result=='signing'&&i.signed=='true'&&i.refund!='true'&&i.near=='true')">
                                    <i class="grey" >
                                        <span class="note">{{i.description}}</span>
                                    </i>
                                    <div class="btn-cyc pay" ng-click="goPay($event,i)">
                                        <span>支付</span>        
                                    </div>  
                            </div>  
                            <!-- 待还机 -->
                            <div class="detail" v-if="i.state=='signing'&&i.signed=='true'&&i.refund=='true'">
                                    <i class="grey">
                                        <span class="note">{{i.description}}</span>
                                    </i>
                                    <div class="btn-cyc" ng-click="goRefund($event,i)">
                                        <span>预约还机</span>
                                    </div>
                            </div>                                                                      
                            <!-- 需买断 -->
                            <div class="detail" v-if="i.state=='buyout_finished'">
                                    <i class="grey">
                                        <span class="note">{{i.description}}</span>
                                    </i>
                                    <div class="btn-cyc pay" ng-click="goCompensate($event,i)">
                                        <span>买断支付</span>       
                                    </div>      

                            </div>
                            <!-- 需赔偿 -->
                            <div class="detail" v-if="i.state=='compensate'">
                                    <i class="grey">
                                        <span class="note">{{i.description}}</span>
                                    </i>
                                    <div class="btn-cyc pay" ng-click="goPartialCompensate($event,i)">
                                        <span>赔偿支付</span>       
                                    </div>  
                            </div>
                            <!-- 已赔偿 -->
                            <div class="detail" v-if="i.state=='partialCompensated'">
                                    <i class="grey">
                                        <span class="note">{{i.description}}</span>
                                    </i>
                            </div>
                            <!-- 已买断 -->
                            <div class="detail" v-if="i.state=='compensated'">
                                <i class="grey">
                                    <span class="note">{{i.description}}</span>
                                </i>
                            </div>
                            <!-- 已完成 -->
                            <div class="detail" v-if="i.state=='lease_finished'">
                                <i class="grey">
                                    <span class="note">{{i.description}}</span>
                                </i>
                            </div>
                        </div>
                    </div>
            	</div>
            </div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.content {
		position: relative;
		top: 44px;
		left: 0;
		& .nolist {
			margin-top: 112px;
    		text-align: center;
    		& .img {
    			background: url('../../assets/img/comm/blank-4.png') no-repeat;
    			background-size: contain;
    			width: 145px;
				height: 145px;
				margin: 0 auto;
    		}
		}
		& .unit {
		    padding: 0;
		    margin-top: 12px;
		    border: none;
		    width: 100%;
		    overflow: hidden;
		}
		& .box {
			color: #444;
		    position: relative;
		    z-index: 2;
		    display: block;
		    margin: -1px;
		    & .top {
			    float: left;
			    width: 100%;
			    height: 47.5px;
			    padding: 16px;
			    line-height: 47.5px;
			    text-align: left;
			    background-color: #fff;
			    & .status {
				    display: inline-block;
				    font-size: 14px;
				    color: #4C5B71;
				}
				& span {
				    font-size: 11px;
				    color: #bbb;
				    float: right;
				}
			}
		}
		& .infoWrap {
		    margin: 16px;
		    position: relative;
		    padding: 0;
		    & .item {
			    border: none;
			    font-size: 16px;
			    padding: 0;
			    width: 100%;
			    color: #444;
			    position: relative;
			    z-index: 2;
			    display: block;
			    margin: -1px;
			    overflow: hidden;
    			text-overflow: ellipsis;
			}
		}
		& .goods {
		    display: -webkit-box;
		    display: flex;
		    -webkit-box-pack: start;
		    justify-content: flex-start;
		    -webkit-box-align: center;
		    align-items: center;
		    border-top: .5px solid #eee;
		    border-bottom: .5px solid #eee;
		    height: 104.5px;
		    & .product-img {
			    width: 72px;
			    height: 72px;
			    display: -webkit-box;
			    display: flex;
			    -webkit-box-pack: center;
			    justify-content: center;
			    -webkit-box-align: center;
			    align-items: center;
			    background-color: #F4F4F4;
			}
			& .product-info {
			    width: 271px;
			    overflow: hidden;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    text-align: left;
			    & .name {
				    color: #333;
				    font-size: 14px;
				    margin-bottom: 8px;
				    float: left;
				    padding-left: 16px;
				    width: 271px;
				}
				& .standard {
				    height: 20px;
				    font-size: 12px;
				    color: #666;
				    margin-bottom: 13px;
				    float: left;
				    padding-left: 16px;
				    width: 271px;
				}
				& p {
					overflow: hidden;
					margin-top: 0;
    				text-overflow: ellipsis;
				}
				& .orderId {
				    font-size: 12px;
				    color: #999;
				    float: left;
				    padding-left: 16px;
				    width: 271px;
				    margin:0;
				}
			}
		}
		& .detail {
		    width: 100%;
		    overflow: hidden;
		    text-align: left;
		    & i {
			    display: inline-block;
			    width: 100%;
			    font-size: .11px;
			    line-height: 18.75px;
			    color: #999;
			    padding: 9px 13px;
			}
		}
		& .btn-cyc {
		    float: right;
		    min-width: 70px;
		    color: #4C5B71;
		    border-radius: 3px;
		    font-size: 12px;
		    text-align: center;
		    border: 1px solid #4C5B71;
		    height: 24px;
		    line-height: 24px;
		    margin-bottom: 12px;
		}
		i {
			font-style: normal;
		}
	}

</style>
<script>
	import { Tab, TabItem } from 'vux';
	export default {
		components: {
            Tab,
            TabItem
        },
        data() {
        	return {
	        	headers:{
	                title:'租赁订单',
	                skip:'',
	            },
	            lst: [{
	            	"goodsName": "ss",
					"id": 1,
					"stateStr": "待系统审核",
					"createTime": "11111111",
					"compensateTime": "111111121",
					"state": "pending_system_credit_check",
					"orderNumber": "asda11231sfa",
					"imgUrl": "xxx.jpg",
					"standardList": [
						{
							"name": "玫瑰金"
						},
						{
							"name": "玫瑰金"
						},
						{
							"name": "玫瑰金"
						}
					],
					"lastPayTime": 1509953606949,
					"description": "reRNC0EG12"
	            }]
	        }
        },
        methods: {
            back(){
                this.$router.go(-1)
            }
        },
	}
</script>